<template>
  <div class="resource-chart">
    <div class="chart-header">
      <h4>资源生产</h4>
      <div class="chart-legend">
        <div 
          v-for="(item, index) in data.datasets[0].data" 
          :key="index"
          class="legend-item"
        >
          <div 
            class="legend-color" 
            :style="{ backgroundColor: data.datasets[0].backgroundColor[index] }"
          ></div>
          <span class="legend-label">{{ data.labels[index] }}</span>
          <span class="legend-value">{{ formatValue(item) }}</span>
        </div>
      </div>
    </div>
    <div class="chart-container">
      <svg class="chart-svg" viewBox="0 0 200 200">
        <g transform="translate(100, 100)">
          <path
            v-for="(segment, index) in pieSegments"
            :key="index"
            :d="segment.path"
            :fill="segment.color"
            class="pie-segment"
            @mouseenter="hoveredSegment = index"
            @mouseleave="hoveredSegment = -1"
          />
          <text
            v-for="(segment, index) in pieSegments"
            :key="`label-${index}`"
            :x="segment.labelX"
            :y="segment.labelY"
            class="segment-label"
            text-anchor="middle"
            dominant-baseline="middle"
          >
            {{ segment.percentage }}%
          </text>
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

interface ChartData {
  labels: string[]
  datasets: Array<{
    label: string
    data: number[]
    backgroundColor: string[]
  }>
}

interface Props {
  data: ChartData
}

const props = defineProps<Props>()
const hoveredSegment = ref(-1)

const pieSegments = computed(() => {
  const dataset = props.data.datasets[0]
  const total = dataset.data.reduce((sum, value) => sum + value, 0)
  
  if (total === 0) return []
  
  let currentAngle = -Math.PI / 2 // 从顶部开始
  const radius = 80
  const labelRadius = 60
  
  return dataset.data.map((value, index) => {
    const percentage = (value / total) * 100
    const angle = (value / total) * 2 * Math.PI
    
    const startAngle = currentAngle
    const endAngle = currentAngle + angle
    
    // 计算路径
    const x1 = Math.cos(startAngle) * radius
    const y1 = Math.sin(startAngle) * radius
    const x2 = Math.cos(endAngle) * radius
    const y2 = Math.sin(endAngle) * radius
    
    const largeArcFlag = angle > Math.PI ? 1 : 0
    
    const path = [
      `M 0 0`,
      `L ${x1} ${y1}`,
      `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
      `Z`
    ].join(' ')
    
    // 计算标签位置
    const labelAngle = startAngle + angle / 2
    const labelX = Math.cos(labelAngle) * labelRadius
    const labelY = Math.sin(labelAngle) * labelRadius
    
    currentAngle = endAngle
    
    return {
      path,
      color: dataset.backgroundColor[index],
      percentage: Math.round(percentage),
      labelX,
      labelY
    }
  })
})

function formatValue(value: number): string {
  if (value >= 1000000) {
    return (value / 1000000).toFixed(1) + 'M'
  } else if (value >= 1000) {
    return (value / 1000).toFixed(1) + 'K'
  } else {
    return Math.floor(value).toString()
  }
}
</script>

<style scoped>
.resource-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-header {
  margin-bottom: 1rem;
}

.chart-header h4 {
  margin: 0 0 0.5rem 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-label {
  flex: 1;
  color: #cccccc;
}

.legend-value {
  color: #ffffff;
  font-weight: 500;
}

.chart-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.chart-svg {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 200px;
}

.pie-segment {
  cursor: pointer;
  transition: all 0.2s ease;
}

.pie-segment:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
  transform-origin: center;
}

.segment-label {
  fill: #ffffff;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header h4 {
    font-size: 0.9rem;
  }
  
  .legend-item {
    font-size: 0.75rem;
  }
  
  .chart-container {
    min-height: 120px;
  }
}
</style>